<template>
  <div class="featured-promotions">
    <div v-for="promo in promotions" :key="promo.id" class="promo-card">
      <img :src="promo.imageUrl" :alt="promo.title" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Placeholder data
const promotions = ref([
  { id: 1, title: 'New User Bonus', imageUrl: 'https://via.placeholder.com/600x300/a8edea/333333?text=New+User+Bonus' },
  { id: 2, title: 'Limited Time Offers', imageUrl: 'https://via.placeholder.com/600x300/fed6e3/333333?text=Limited+Time+Offers' },
])
</script>

<style scoped>
.featured-promotions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.promo-card {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.promo-card:hover {
  transform: translateY(-5px);
}
.promo-card img {
  width: 100%;
  height: auto;
  display: block;
}
</style>
